<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

  <head>
    <title>BMI DSS Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <%= stylesheet_link_tag '/stylesheets/application.css' %>
    <%= csrf_meta_tag %>
    <%= yield(:head) %>
    <%= javascript_include_tag "http://www.google.com/jsapi" %>
    <%= javascript_include_tag 'jquery-1.5.1.min.js' %>
    <%= javascript_include_tag 'jquery-ui-1.8.11.custom.min.js' %>
    <%= javascript_include_tag 'application.js'  %>
    <%= javascript_include_tag 'jquery.simpletip-1.3.1.js'  %>
    <%= javascript_include_tag 'jquery.tabSlideOut.v1.3'  %>
    <%= javascript_include_tag :high_charts %>


    <script type="text/javascript">
      $(function(){
        $('.slide-out-div').tabSlideOut({
          tabHandle: '.handle',                     //class of the element that will become your tab
          pathToTabImage: '/images/tips_tricks.png', //path to the image for the tab //Optionally can be set using css
          imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
          imageWidth: '30px',                       //width of tab image            //Optionally can be set using css
          tabLocation: 'right',                      //side of screen where tab lives, top, right, bottom, or left
          speed: 300,                               //speed of animation
          action: 'click',                          //options: 'click' or 'hover', action to trigger animation
          topPos: '5px',                          //position from the top/ use if tabLocation is left or right
          leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
          fixedPosition: true                    //options: true makes it stick(fixed position) on scroll
        });

      });

    </script>

    <script type="text/javascript">

      function toggleVisibility(newSection) {
        $(".section").not("#" + newSection).hide();
        $("#" + newSection).show();
      }
    </script>


  </head>


  <body background="images/bg1.jpg" style="background-color:#FFFFFF;">
    <div id="Wrapper">
      <div  id="Table_01">
        <div id="Header-Left_">
          <img id="Header_Left" src="images/Header_Left.jpg" width="20" height="137" alt="" />
        </div>
        <div id="Header_">
          <img alt="" src="images/Header.jpg" width="980" height="137" />
        </div>
        <div id="Header-Right_">
          <img id="Header_Left" src="images/Header-Right.jpg" width="24" height="137" alt="" />
        </div>
        <div id="Nav-Left_">
          <img id="Nav_Left" src="images/Nav-Left.jpg" width="20" height="52" alt="" />
        </div>
        <div id="Nav_">

          &nbsp;</div>
        <div id="Nav-Right_">
          <img id="Nav_Right" src="images/Nav-Right.jpg" width="24" height="52" alt="" />
        </div>
        <div id="Body-Left_">
          <img id="Body_Left" src="images/Body-Left.jpg" width="20" height="485" alt="" />
        </div>
        <div id="Body_" class="style5">

          <table style="width: 100%">
            <tr>
              <td class="BMIResults"><strong>Calcuated Input:</strong></td>
              <td class="BMIResults">Gender:
                <input name="Radio1" type="radio"  value="V1" checked="checked" />Male&nbsp;
                <input name="Radio1" type="radio" value="V1" />Female</td>
              <td class="BMIResults">Race:<select name="Race Selection0">
                  <option selected="selected">Select..</option>
                  <option value="Black">Black</option>
                  <option value="White">White</option>
                  <option value="White">Other</option>
                </select></td>
              <td class="BMIResults">Age:<input name="Text3" type="text" size="5px"/> Years old</td>
              <td class="BMIResults">Height:<select name="Ft Selection0">
                  <option></option>
                  <option selected="selected">Feet</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                </select><select name="Inches Selection0">
                  <option></option>
                  <option selected="selected">Inches</option>
                  <option value="0">0</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="9">10</option>
                </select></td>
              <td class="BMIResults">Weight:<input name="Text4" type="text" size="5px"/> lbs</td>
            </tr>
          </table>

          <table style="width: 100%">
            <tr>
              <td id="chart" rowspan="2" style="width: 700px" class="Graph-Section">
                <head>
                  <!--Load the AJAX API-->
                  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                  <script type="text/javascript">
    
                    // Load the Visualization API and the piechart package.
                    google.load('visualization', '1.0', {'packages':['corechart']});
      
                    // Set a callback to run when the Google Visualization API is loaded.

                          

                    function drawVisualization() {
                      // Some raw data (not necessarily accurate)

                      var rowData = [['Weight', '# of People Like You', 'Population'],
                        ['100', 0, 27.54035703299203], ['101', 0, 34.739423586084094], ['102', 0, 43.57471907100415], ['103', 0, 54.33728072704635], ['104', 0, 67.34775532015269], ['105', 0, 82.95374740965775], ['106', 0, 101.52544162785387], ['107', 0, 123.44929326415335], ['108', 0, 149.1196430205801], ['109', 0, 178.92819763148603], ['110', 0, 213.25142746249867], ['111', 0, 252.4360624653892], ['112', 0, 296.78301387762167], ['113', 0, 346.53020334144037], ['114', 0, 401.834933983285], ['115', 0, 462.7565779479773], ['116', 0, 529.2404693143444], ['117', 0, 601.1039674194793], ['118', 0, 678.0256814796224], ['119', 0, 759.5388132156925], ['120', 0, 845.029473476074], ['121', 0, 933.7406594800201], ['122', 0, 1024.7823443462823], ['123', 0, 1117.147838698517], ['124', 0, 1209.7362495872999], ['125', 0, 1301.3805039548872], ['126', 0, 1390.8800454762709], ['127', 0, 1477.0369801957138], ['128', 0, 1558.694163611802], ['129', 0, 1634.7735135663725], ['130', 0, 1704.3127192647269], ['131', 0, 1766.4985108231936], ['132', 0, 1820.6947622195578], ['133', 0, 1866.4639212781985], ['134', 0, 1903.5805825512227], ['135', 0, 1932.0364237536296], ['136', 0, 1952.0361880664088], ['137', 0, 1963.9848825935574], ['138', 0, 1968.4668445882794], ['139', 0, 1966.2177690537935], ['140', 0, 1958.0911641998327], ['141', 0, 1945.0209805455497], ['142', 0, 1927.9823279809261], ['143', 0, 1907.9522440874757], ['144', 0, 1885.8724066880397], ['145', 1862.6155028051214, 1862.6155028051214], ['146', 0, 1838.9566914280501], ['147', 0, 1815.5512511553272], ['148', 0, 1792.9191122250686], ['149', 0, 1771.436563634761], ['150', 0, 1751.3350273083704], ['151', 0, 1732.706427242702], ['152', 0, 1715.5143725633397], ['153', 0, 1699.6101342503225], ['154', 0, 1684.7522346561227], ['155', 0, 1670.6283893803543], ['156', 0, 1656.878539432119], ['157', 0, 1643.1177799033692], ['158', 0, 1628.9581178930741], ['159', 0, 1614.02816304656], ['160', 0, 1597.9900535874729], ['161', 0, 1580.5531340110188], ['162', 0, 1561.4841137100173], ['163', 0, 1540.6136366866153], ['164', 0, 1517.8393715892998], ['165', 0, 1493.1258817494472], ['166', 0, 1466.5016525518938], ['167', 0, 1438.0537367888533], ['168', 0, 1407.9205282659827], ['169', 0, 1376.2831923017736], ['170', 0, 1343.356272664159], ['171', 0, 1309.3779625634816], ['172', 0, 1274.600477645799], ['173', 0, 1239.2809066443772], ['174', 0, 1203.6728453558978], ['175', 0, 1168.0190463597096], ['176', 0, 1132.5452442379549], ['177', 0, 1097.4552471401946], ['178', 0, 1062.9273228135064], ['179', 0, 1029.1118524380624], ['180', 0, 996.1301798702763], ['181', 0, 964.0745477244748], ['182', 0, 933.0089851463107], ['183', 0, 902.9709947641179], ['184', 0, 873.9738774437182], ['185', 0, 846.0095321751279], ['186', 0, 819.0515735843662], ['187', 0, 793.0586199988437], ['188', 0, 767.9776194829279], ['189', 0, 743.7470986099145], ['190', 0, 720.3002378265451], ['191', 0, 697.567697080206], ['192', 0, 675.480135030331], ['193', 0, 653.9703839141703], ['194', 0, 632.9752593965038], ['195', 0, 612.4370000714287], ['196', 0, 592.3043444181776], ['197', 0, 572.5332637950028], ['198', 0, 553.0873784587748], ['199', 0, 533.9380896984369], ['200', 0, 515.0644651243209], ['201', 0, 496.45291618014926], ['202', 0, 478.09670729804503], ['203', 0, 459.9953350791154], ['204', 0, 442.15381373893507], ['205', 0, 424.58190008619346], ['206', 0, 407.2932877630117], ['207', 0, 390.30479659953824], ['208', 0, 373.63557892417185], ['209', 0, 357.30636069098387], ['210', 0, 341.3387314696815], ['211', 0, 325.7544937897227], ['212', 0, 310.5750791073623], ['213', 0, 295.82103481394967], ['214', 0, 281.5115842441231], ['215', 0, 267.6642595738229], ['216', 0, 254.29460580563853], ['217', 0, 241.4159526982027], ['218', 0, 229.0392504751791], ['219', 0, 217.17296441211533], ['220', 0, 205.82302290862617], ['221', 0, 194.99281337209365], ['222', 0, 184.68322013206839], ['223', 0, 174.89269863934078], ['224', 0, 165.6173803510001], ['225', 0, 156.85120293704426], ['226', 0, 148.58606074314727], ['227', 0, 140.81197078929816], ['228', 0, 133.51724995966526], ['229', 0, 126.68869943247901], ['230', 0, 120.31179279958974], ['231', 0, 114.37086472548201], ['232', 0, 108.84929738839341], ['233', 0, 103.72970232676134], ['234', 0, 98.99409567859824], ['235', 0, 94.62406514669533], ['236', 0, 90.60092734655879], ['237', 0, 86.90587449519373], ['238', 0, 83.52010967622239], ['239', 0, 80.42497016975159], ['240', 0, 77.60203856365916], ['241', 0, 75.03324156659542], ['242', 0, 72.70093662235607], ['243', 0, 70.58798658092513], ['244', 0, 68.67782281423166], ['245', 0, 66.954497275447], ['246', 0, 65.40272409065014], ['247', 0, 64.00791134214414], ['248', 0, 62.75618375502785], ['249', 0, 61.634397034279495], ['250', 0, 60.63014462013034], ['251', 0, 59.73175763647484], ['252', 0, 58.92829880205611], ['253', 0, 58.2095510587743], ['254', 0, 57.56600164720715], ['255', 0, 56.98882232783537], ['256', 0, 56.46984640890228], ['257', 0, 56.00154319970412], ['258', 0, 55.57699046258753], ['259', 0, 55.189845389215634], ['260', 0, 54.834314577733416], ['261', 0, 54.50512343827562], ['262', 0, 54.197485405565224], ['263', 0, 53.90707128987888], ['264', 0, 53.6299790519334], ['265', 0, 53.36270424377455], ['266', 0, 53.10211131686755], ['267', 0, 52.8454059605707], ['268', 0, 52.59010859921714], ['269', 0, 52.33402914421751], ['270', 0, 52.075243068993515], ['271', 0, 51.81206884911443], ['272', 0, 51.543046787685114], ['273', 0, 51.266919226697404], ['274', 0, 50.98261212856872], ['275', 0, 50.68921799827534], ['276', 0, 50.38598010516373], ['277', 0, 50.07227795446005], ['278', 0, 49.74761395152802], ['279', 0, 49.411601196782655], ['280', 0, 49.063952345699974], ['281', 0, 48.70446946630286], ['282', 0, 48.333034825715146], ['283', 0, 47.949602537620486], ['284', 0, 47.55419100360739], ['285', 0, 47.14687608323631], ['286', 0, 46.72778493010526], ['287', 0, 46.2970904340652], ['288', 0, 45.85500621295175], ['289', 0, 45.40178210062426], ['290', 0, 44.93770008168026], ['291', 0, 44.463070626833264], ['292', 0, 43.97822938656776], ['293', 0, 43.4835342042469], ['294', 0, 42.97936241331345], ['295', 0, 42.46610838654895], ['296', 0, 41.944181308524584], ['297', 0, 41.41400314536434], ['298', 0, 40.876006788737385], ['299', 0, 40.33063435359462], ['300', 0, 39.77833561156079]];

                      // Create and populate the data table.
                      var data = google.visualization.arrayToDataTable(rowData);
                      
                      // Options
                      
                      var options = {
                        chf:'bg,s,383232',
                        chxl: '',
                        chxp: '',
                        chxr: '0,100,300|1,100,300',
                        chxs: '0,676767,11.5,0,lt,676767',
                        chxtc: '0,5',
                        chxt: 'x,x',
                        title : 'Results for White 22 year old male, 66 inches, 145 pounds ',
                        width: 800,
                        height: 400,         
                        vAxis: {title: "Number of People"},
                        hAxis: {title: "Weight"},
                        seriesType: "bars",
                        series: {1: {type: "area"}
                          
                          
                        }
                      };
                          
                 
      
                      // Create and draw the visualization.
                      var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
                      ac.draw(data, options);
                    }

                    google.setOnLoadCallback(drawVisualization);
                  </script>

                  <body style="font-family: Arial;border: 0 none;">
                    <div id="visualization" style="width: 600px; height: 400px;"></div>
                  </body>

                  <body>
                    <!--Div that will hold the pie chart-->
                    <div id="chart_div"></div>

                    <div class="slide-out-div">
                      <a class="handle" href="http://link-for-non-js-users.html">Content</a>
                      <h2 class="header">Tips and Hints</h2>
                      <table id="greentable">
                        <tr>
                          <td>
                            <ul>
                              <li>Drag the blue bar on the graph to explore other BMIs close to you.</li>
                            </ul>
                          </td>
                        </tr>
                        <tr>
                          <td>
                            <ul>
                              <li>Hover over the graph to learn more about your weight ranges.</li>
                            </ul>
                          </td>
                        </tr>
                        <tr>
                          <td><ul>
                              <li>The colored areas under the curve indicate the percentage of people in each health category:</li>
                              <ul>
                                <li>Green: Healthy body weight</li>
                                <li>Yellow: Overweight</li>
                                <li>Orange: Obese</li>
                                <li>Red: Morbidly obese</li>
                              </ul>
                            </ul></td>
                        </tr>

                      </table>
                    </div>

                  </body>

              </td>
              <td style="width: 231px; height: 42px;" class="Columns""><strong>
			Your Results</strong></td>
            </tr>
            <tr>
              <td class="Columns-Contents" valign="top">
                <table style="width: 100%">
                  <tr>
                    <td style="width: 60px">
                      <img alt="" src="images/calculator-icon.png" width="60" height="60" /></td>
                    <td>Your BMI is <span class="style6"><strong>20</strong></span></td>
                    <td>
                      <img alt="" src="images/help.png" width="30" height="30" /></td>
                  </tr>
                  <tr>
                    <td style="width: 60px">
                      <img alt="" src="images/graph-icon.png" width="60" height="60" /></td>
                    <td>The <span class="style6"><strong>Blue</strong></span> line represents you</td>
                    <td>
                      <img alt="" src="images/help.png" width="30" height="30" /></td>
                  </tr>
                  <tr>
                    <td style="width: 60px">
                      <img alt="" src="images/up-arrow1.png" width="60" height="60" /></td>
                    <td><span class="Red-Indicator"><strong>47%</strong></span> of
					people like you have a higher BMI &nbsp;</td>
                    <td>
                      <img alt="" src="images/help.png" width="30" height="30" /></td>
                  </tr>
                  <tr>
                    <td style="width: 60px">
                      <img alt="" src="images/down-arrow.png" width="60" height="60" /></td>
                    <td><span class="Green-Indicator"><strong>53%</strong></span> of
					people like you have a lower BMI</td>
                    <td>
                      <img alt="" src="images/help.png" width="30" height="30" /></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>



        </div>
        <div id="Body-Right_">
          <img id="Body_Right" src="images/Body-Right.jpg" width="24" height="485" alt="" />
        </div>
        <div id="Info-Left_">
          <img id="Info_Left" src="images/Info-Left.jpg" width="20" height="226" alt="" />
        </div>
        <div id="Info_">
          <span class="style1"><span style="style2"><strong class="Info-Pane-Titles"><br />
		What is BMI?
              </strong><br />
              <span class="Info-Pane-Contents">Body Mass Index (BMI) is a number calculated from a person's weight and height. BMI provides a reliable indicator of body fatness for most people and is used to screen for weight categories that may lead to health problems. <a href="http://www.cdc.gov/healthyweight/assessing/bmi/adult_bmi/index.html">Learn more at the U.S. Centers for Disease Control website.</a></span>
              <br />
              <br />
              <strong class="Info-Pane-Titles">How do I compare to my peers?</strong><br />
              <span class="Info-Pane-Contents">According to your results, your BMI falls with the middle 50% of your peers' BMIs.</span><br />
              <br />
              <strong class="Info-Pane-Titles">Do I have a healthy body weight?</strong><br />
              <span class="Info-Pane-Contents">You have a healthy body weight. You have a BMI of 20 and a person with a BMI of 18.5 to 24.9 is considered to be at a healthy weight. A person with a BMI of 25-29.9 is considered to be overweight. A BMI over 30 is considered obese. A BMI of 40 or above indicates that a person is morbidly obese. This can increase a person's risk of death from any cause by 50% to 150%.</span>
              <br />
              <br />
            </span></span></div>
        <div id="Info-Right_">
          <img id="Info_Right" src="images/Info-Right.jpg" width="24" height="226" alt="" />
        </div>
        <div id="Footer-Left_">
          <img id="Footer_Left" src="images/Footer-Left.jpg" width="20" height="50" alt="" />
        </div>
        <div id="Footer_">
          <br />
          <div class="style3">Copyright © 2011. BMI-DSS - Carnegie Mellon University. All rights reserved.
            <p class="style4">
              <%= link_to 'Home', home_path %>&nbsp;&nbsp;::&nbsp;&nbsp;
              <%= link_to 'About', about_path %>&nbsp;&nbsp;::&nbsp;&nbsp;
              <%= link_to 'Contact Us', contact_path %>
            </p>
          </div>
        </div>
        <div id="Footer-Right_">
          <img id="Footer_Right" src="images/Footer-Right.jpg" width="24" height="50" alt="" />
        </div>

      </div>
    </div>
  </body>

</html>